<template>
  <div @click="checkDetail" class="container">
    <div class="img">
      <img v-lazy="sessionData.intro.detail.pic" alt="课程封面" class="pic" />
    </div>
    <div class="infomation">
      <p class="session-name">{{ sessionData.intro.name }}</p>
      <p class="studens">{{ sessionData.sales }}人正在学</p>
      <p class="free" v-if="sessionData.free">免费</p>
      <p v-else-if="sessionData.discount">
        <span class="discount-price">￥{{ discountPrice }}</span>
        <span class="prediscount-price">￥{{ sessionData.intro.price }}</span>
        <span class="nowdiscount">限时优惠</span>
      </p>
      <p class="discount-price" v-else>￥{{ sessionData.intro.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sessionData: Object,
  },
  computed: {
    discountPrice() {
      return this.sessionData.intro.price * this.sessionData.discount;
    },
  },
  methods: {
    /**
     * 跳转到对应详情页面
     */
    checkDetail() {
      this.$router.push("/detail/" + this.sessionData.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .img {
    flex: 2;
    img {
      width: 100%;
      border-radius: 10px;
    }
  }
  .infomation {
    flex: 3;
    padding: 0 15px;
    p {
      margin: 0;
      padding: 0;
    }
    .session-name {
      font-weight: 600;
      font-size: 14px;
    }
    @mixin little-gray {
      font-size: 12px;
      color: rgb(158, 157, 157);
    }
    .studens {
      @include little-gray();
    }
    .free {
      @include little-gray();
    }
    .discount-price {
      color: rgb(212, 183, 14);
      font-size: 14px;
      font-weight: 600;
    }
    .prediscount-price {
      color:#ccc;
      font-size: 14px;
      text-decoration: line-through;
    }
    .nowdiscount{
        border: 0.5px solid red;
        border-radius: 8px;
        margin-left: 5px;
        font-size: 12px;
        color: red;
        // display: inline-block;
        padding: 1px 5px;
    }

  }
}
</style>